<template>
  <view class="menu-list">
    <view class="menu-order">
      <view class="card">
        <image class="card-back" src="@/static/image/mine/card.png" />
        <view class="card-container">
          <view class="page-container">
            <view class="card-content flex flex-middle">
              <view
                class="card-item flex flex-middle flex-center"
                @click="toDetails('coupon')"
              >
                <image src="@/static/image/mine/coupon.png" mode="widthFix" />
                卡/券
              </view>
              <view
                class="card-item flex flex-middle flex-center"
                @click="toDetails('follow')"
              >
                <image src="@/static/image/mine/follow.png" mode="widthFix" />
                关注
                <view class="left-line"></view>
                <view class="right-line"></view>
              </view>
              <view
                class="card-item flex flex-middle flex-center"
                @click="toDetails('collect')"
              >
                <image src="@/static/image/mine/collect.png" mode="widthFix" />
                收藏
                <view class="left-line"></view>
                <view class="right-line"></view>
              </view>
              <view
                class="card-item flex flex-middle flex-center"
                @click="toDetails('address')"
              >
                <image src="@/static/image/mine/address.png" mode="widthFix" />
                地址
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="top">
        <view
          class="page-container flex flex-middle flex-between"
          @click="toOrder(-1)"
        >
          <view>订单记录</view>
          <view class="check-all flex flex-middle">
            查看全部
            <u-icon name="arrow-right" color="#323232" size="12" />
          </view>
        </view>
      </view>
      <view class="page-container">
        <view class="order-list flex flex-middle">
          <view
            class="order-item text-center"
            v-for="(item, index) in orderList"
            :key="index"
            @click="toOrder(index)"
          >
            <image
              :src="`/static/image/mine/order${index + 1}.png`"
              mode="widthFix"
            />
            <view>{{ item }}</view>
          </view>
        </view>
      </view>
    </view>
    <view
      class="menu-item"
      v-for="(item, index) in menuList"
      :key="index"
      @click="toMenuDetails(index)"
    >
      <view class="page-container flex flex-middle flex-between">
        <view>
          {{ item }}
        </view>
        <u-icon name="arrow-right" color="#212121" size="14" />
      </view>
    </view>
    <view class="menu-item no-border" @click="contactUs">
      <view class="page-container flex flex-middle flex-between">
        <view> 联系我们 </view>
        <view class="icon flex flex-middle flex-center">
          <u-icon name="phone-fill" color="#31BC4E" size="20" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderList: ["待付款", "待使用", "待评价", "售后/退款"],
      menuList: ["会员中心", "匠人入驻", "意见反馈"],
    };
  },
  methods: {
    toOrder(type) {
      this.$checkLogin();
      this.$navigateTo(
        `/pages/order/index${type !== -1 ? `?type=${type}` : ""}`
      );
    },
    toDetails(page) {
      this.$checkLogin();
      this.$navigateTo(`/pages/${page}/index`);
    },
    async toMenuDetails(type) {
      this.$checkLogin();
      if (type == 0) {
        const code = await this.$store.dispatch("getVipInfo");
        if (code) this.$navigateTo("/pages/vip/index");
      }
      if (type == 1) this.$navigateTo("/pages/craftsman/join");
      if (type == 2) this.$navigateTo("/pages/mine/opinion");
    },
    contactUs() {
      uni.makePhoneCall({
        phoneNumber: "18187059122",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.menu-list {
  border-radius: 20px 20px 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  overflow: hidden;
}

.menu-order {
  .card {
    position: relative;

    &-back {
      height: 100px;
    }

    &-item {
      width: 25%;
      height: 48px;
      color: #ffe9cd;
      position: relative;

      .left-line,
      .right-line {
        width: 1px;
        height: 18px;
        background: #a4a4a4;
        opacity: 0.16;
        position: absolute;
        top: 50%;
        margin-top: -9px;
      }

      .left-line {
        left: 0;
      }

      .right-line {
        right: 0;
      }

      image {
        width: 18px !important;
        margin-right: 4px;
      }
    }

    &-content {
      padding: 0 4.2%;
    }

    &-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
    }

    image {
      width: 100vw;
    }
  }

  .order-list {
    margin-bottom: 16px;

    .order-item {
      width: 25%;
      font-size: 12px;

      image {
        width: 44px;
        height: 44px;
        margin-bottom: 4px;
      }
    }
  }

  .top {
    color: #323232;
    padding: 16px;
    margin-top: -50px;
    position: relative;

    .check-all {
      font-size: 12px;
    }
  }
}

.no-border {
  border: none !important;
}

.menu-item {
  border-bottom: 1px solid #efefef;
  height: 50px;
  padding: 0 16px;
  color: #212121;

  .icon {
    background: #dcfee4;
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }

  .page-container {
    height: 100%;
  }
}
</style>